<template>
	<view>
		<view class="login">
			<image src="@/static/login/icon_login_1.png" mode="aspectFit" class="icon_login_1"></image>
			<image src="@/static/login/icon_login_2.png" mode="aspectFit" class="icon_login_2"></image>
			<image src="@/static/login/icon_login_3.png" mode="aspectFit" class="icon_login_3"></image>
			<view class="login-popup">
				<image src="@/static/login/icon_login_4.png" mode="aspectFit" class="icon_login_4"></image>
				<view class="login-form">
					<view style="font-size: 32px;text-align: center;line-height: 32px;padding-bottom: 10px;">
						登陆
					</view>
					<view class="login-form__content">
						<view class="login-form__input">
							<view class="login-form__input_prefix">
								<image
									src="@/static/login/icon_login_account.png"
									mode="aspectFit"
								/>
							</view>
							<view class="login-form__input_value">
								<u-input v-model="login.username" placeholder="教职工号/学号" :adjustPosition="false"></u-input>
							</view>
						</view>
						<view class="line" style="width: 100%;height: 1px;;background-color: #eeeeee;"></view>
						<view class="login-form__input">
							<view class="login-form__input_prefix">
								<image src="@/static/login/icon_login_password.png" mode="aspectFit"></image>
							</view>
							<view class="login-form__input_value">
								<u-input v-model="login.password" placeholder="密码" :password="visible" clearable :adjustPosition="false">
									<view v-if="login.password" slot="suffix" @click="visible = !visible">
										<u-icon v-if="visible" name="eye-fill"></u-icon>
										<u-icon v-else name="eye-off"></u-icon>
									</view>
								</u-input>
							</view>
						</view>
					</view>
					<view class="login-form__footer">
						<view class="login-form__footer_buttons">
							<u-checkbox-group  @change="changeChecked" style="z-index: 999;">
								<u-checkbox v-model="checked" :checked="rememberMe" label="记住密码" name="remember"></u-checkbox>
							</u-checkbox-group>
							<view class="buttons text" 
								style="display: block;text-align: right;padding-right: 0;margin-right: 0;">
								<text @click="handleForget()">忘记密码?</text>
							</view>
						</view>
						<view>
							<button class="buttons-login" @click="handleSubmit()">登陆</button>
						</view>
					</view>
					<view class="register">
						<!-- <text>没有账号？<text style="color: #6C8FF8" @click="goRegister()">点击这里</text></text> -->
						<view style="line-height: 28px;font-size: 18px;">南昌工程学院</view>
						<view style="padding-top: 5px;line-height: 24px;">智慧校园</view>
					</view>
				</view>
			</view>
			<view class="color_1"></view>
			<view class="color_2"></view>
			<view class="color_3"></view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import {
		login,
		getUserInfo
	} from '@/api/index.js'
	export default {
		data() {
			return {
				login: {
					username: '2019100754',
					password: '100754'
				},
				visible: true,
				rememberMe: false,
				checked: []
			}
		},
		computed: {
			...mapGetters(['remember', 'username', 'password'])
		},
		onLoad(options) {
			if(options.type == 'loginExpire') {
				this.$toast.show({
					msg: '身份失效，请重新登陆'
				})
			}
		},
		created() {
			this.rememberMe = this.remember
			if(this.remember) {
				this.login.username = this.username
				this.login.password = this.password
				this.checked.push('remember')
			}
		},
		methods: {
			goRegister() {
				uni.navigateTo({
					url: "",
				})
			},
			clearInput(item) {
				this.$set(this.login, item, '')
			},
			changeVisibled() {
				this.visibled = !this.visibled
			},
			handleForget() {
				uni.navigateTo({
					url: '/pages/authentication/index'
				})
			},
			handleSubmit() {
				if((this.login.username ?? '') == '') {
					this.$toast.show({
						msg: '请输入教职工号或学号'
					})
					return
				}
				if((this.login.password ?? '') == '') {
					this.$toast.show({
						msg: '请输入登陆密码'
					})
					return
				}
				this.$loading.show('登陆中...')
				const {
					username,
					password
				} = this.login
				if ((username ?? '') != '' && (password ?? '') != '') {
					login({
						username,
						password,
						os: 'app'
					}).then(res => {
						this.$loading.hide()
						if (res.data.code === 200) {
							this.$store.dispatch('storeToken', res.header.token)
							this.$appStore.setStorage('token', res.header.token)
							const obj = res.data.data
							obj.password = password
							this.$store.dispatch('storeUserInfo', obj)
							uni.reLaunch({
								url: '/pages/index'
							})
						} else {
							this.$toast.show({msg: res.data.msg})
						}
					})
				}
			},
			changeChecked(val) {
				this.$store.dispatch('storeSetting', { remember: val.length > 0 })
			}
		}
	}
</script>

<style scoped lang="scss">
	.login {
		position: relative;
		width: 100vw;
		height: 100vh;
		background-color: #9DBFF3;
		overflow: hidden;
		
		.login-popup {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 70vh;
			border-radius: 40px 40px 0 0;
			background-color: #F3F5F6;
			box-shadow: 0px 0px 80px 0px rgba(55, 62, 125, 0.05);
			
			.icon_login_4 {
				position: absolute;
				left: 0;
				right: 0;
				top: -160px;
				width: 183px;
				height: 197px;
				margin: auto;
			}
			
			.login-form {
				padding-top: 61px;
			}

			.login-form__content {
				width: auto;
				margin: 10px 25px;
				padding: 10px 20px;
				background-color: #ffffff;
				border-radius: 8px;
				box-sizing: border-box;;
			}

			.login-form__input {
				display: flex;
				align-items: center;
				padding: 10px 0;
				margin: 10px 0;

				&_prefix {
					width: 32px;
					height: 32px;
					margin-right: 20px;
				}

				image {
					width: 32px;
					height: 32px;
				}

				&_value {
					width: 100%;
				}
			}

			.login-form__footer {

				&_buttons {
					display: flex;
					margin: 10px 0;
					padding: 10px 25px;
				}

				button {
					width: 100%;
					font-size: 14px;
				}

				.buttons.text{
					margin: 10px;
					border: none;
					background-color: transparent;
					color: #9A9DD8;
					font-size: 14px;
				}

				.buttons-login {
					width: auto;
					margin: 0 20px;
					border-radius: 10px;
					background-color: #0D2B44;
					color: #ffffff;
					line-height: 54px;
				}
			}

			.register {
				position: absolute;
				bottom: 50px;
				width: 100%;
				text-align: center;
			}
		}
		
		image {
			position: absolute;
			display: block;
		}
		
		.icon_login_1 {
			top: calc(var(--status-bar-height) + 15px);
			left: 36px;
			width: 64px;
			height: 64px;
		}
		
		.icon_login_2 {
			right: -30px;
			top: calc(var(--status-bar-height) + 25px);
			width: 128px;
			height: 128px;
			opacity: 1;
		}
		
		.icon_login_3 {
			left: -66px;
			top: 30vh;
			transform: translateY(-120px);
			width: 172px;
			height: 172px;
			opacity: 1;
		}
		
		view[class^=color] {
			position: absolute;
		}

		.color_1 {
			left: -191px;
			top: 476px;
			width: 231px;
			height: 231px;
			opacity: 1;
			background: rgba(196, 177, 218, 1);
			filter: blur(194px);
		}
		.color_2 {
			left: 341.03px;
			top: 624.03px;
			width: 145px;
			height: 145px;
			opacity: 1;
			background: rgba(255, 227, 201, 1);
			filter: blur(104px);
		}
		.color_3 {
			left: 254.69px;
			top: 777.69px;
			width: 153px;
			height: 153px;
			opacity: 1;
			background: rgba(240, 159, 165, 1);
			filter: blur(164px);
		}
	}
	.content {
		.h1 {
			margin: 50px 20px 0;

			.desc {
				display: block;
				line-height: 30px;

				&>* {
					display: inline-block;
				}

				uni-navigator {
					color: #0aa679;
				}
			}
		}

		.logo {
			width: 100%;

			image {
				display: block;
				width: 64px;
				height: 64px;
				margin: 20px auto;
				border-radius: 50%;
			}
		}

		.form {
			width: 90%;
			margin: auto;
			border-radius: 10px;
			background-color: #ffffff;
			overflow: hidden;

			.form-item {
				width: 90%;
				margin: 15px auto 10px;

				& /deep/ .u-input:focus-within {
					border-bottom: 1px solid #0aa679;
				}

				& /deep/ .u-border-bottom {
					border-bottom: 1px solid #c0c7c3;
				}

				.button {
					width: 100%;
					margin: 20px auto;
					padding: 8px 0;
					background-color: #0aa679;
					border-radius: 5px;
					color: #ffffff;
					font-size: 16px;
					text-align: center;
				}
			}
		}
	}
</style>
